<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Site Title -->
    <title>APEZ - Responsive Multi-Purpose HTML5 Template</title>
    <!-- Meta Description Tag -->
    <meta name="Description" content="APEZ - Responsive Multi-Purpose HTML5 Template">
    <!-- Favicon Icon -->
    <link rel="icon" type="image/x-icon" href="images/favicon.png" />
    <!-- Material Design Lite Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/material/material.min.css" />
    <!-- Material Design Select Field Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/material/mdl-selectfield.min.css">
    <!-- Animteheading Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/animateheading/animateheading.min.css" />
    <!-- Owl Carousel Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/owl_carousel/owl.carousel.min.css" />
    <!-- Animate Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/animate/animate.min.css" />
    <!-- Magnific Popup Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/magnific_popup/magnific-popup.min.css" />
    <!-- Flex Slider Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/flexslider/flexslider.min.css" />
    <!-- Custom Main Stylesheet CSS -->
    <link rel="stylesheet" href="dist/css/style.css">
</head>
<body>

    <div class="wrapper">
        <!-- Start Header Section -->
        <header id="header" class="header-dark">
            <div class="layer-stretch hdr">
                <div class="tbl animated fadeInDown">
                    <div class="tbl-row">
                        <!-- Start Header Logo Section -->
                        <div class="tbl-cell hdr-logo">
                            <a href="index.html"><img src="images/logo.png" alt=""></a>
                        </div><!-- End Header Logo Section -->
                        <div class="tbl-cell hdr-menu">
                            <!-- Start Menu Section -->
                            <ul class="menu">
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Home <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-small">
                                        <li class="row">
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="index.html">Home Style 1</a></li>
                                                    <li><a href="index-1.html">Home Style 2</a></li>
                                                    <li><a href="index-2.html">Home Style 3</a></li>
                                                    <li><a href="index-3.html">Home Style 4</a></li>
                                                    <li><a href="index-4.html">Home Style 5</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="index-5.html">Home Style 6</a></li>
                                                    <li><a href="index-6.html">Home Style 7</a></li>
                                                    <li><a href="index-7.html">Home Style 8</a></li>
                                                    <li><a href="index-8.html">Home Style 9</a></li>
                                                    <li><a href="index-9.html">Home Style 10</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="index-ecommerce.html">Home E-commerce</a></li>
                                                    <li><a href="index-law.html">Home Law firm</a></li>
                                                    <li><a href="index-property.html">Home Property</a></li>
                                                    <li><a href="index-listing.html">Home Listing</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Feature <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-dropdown">
                                        <li>
                                            <a>Property</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="property-1.html">Property Listing 1</a></li>
                                                <li><a href="property-2.html">Property Listing 2</a></li>
                                                <li><a href="property-3.html">Property Listing 3</a></li>
                                                <li><a href="property-page.html">Property Page</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Page Header</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="page-header-1.html">Page Header 1</a></li>
                                                <li><a href="page-header-2.html">Page Header 2</a></li>
                                                <li><a href="page-header-3.html">Page Header 3</a></li>
                                                <li><a href="page-header-4.html">Page Header 4</a></li>
                                                <li><a href="page-header-5.html">Page Header 5</a></li>
                                                <li><a href="page-header-6.html">Page Header 6</a></li>
                                                <li><a href="page-header-7.html">Page Header 7</a></li>
                                                <li><a href="page-header-8.html">Page Header 8</a></li>
                                                <li><a href="page-header-9.html">Page Header 9</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Page Footer</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="page-footer-1.html">Page Footer 1</a></li>
                                                <li><a href="page-footer-2.html">Page Footer 2</a></li>
                                                <li><a href="page-footer-3.html">Page Footer 3</a></li>
                                                <li><a href="page-footer-4.html">Page Footer 4</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Side Panel</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="side-panel-1.html">Light Side Panel</a></li>
                                                <li><a href="side-panel-2.html">Dark Side Panel</a></li>
                                                <li><a href="side-panel-3.html">Colored Side Panel</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="popup.html">Popups</a></li>
                                        <li><a href="coming-soon.html">Coming Soon</a></li>
                                        <li><a href="404.html">404 Page Not Found</a></li>
                                        <li><a href="503.html">503 Temporarily Unavailable</a></li>
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a id="menu-pages" class="mdl-button mdl-js-button mdl-js-ripple-effect">Pages <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu">
                                        <li class="row">
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Service Styles</div>
                                                <ul>
                                                    <li><a href="services-1.html">Services Style 1</a></li>
                                                    <li><a href="services-2.html">Services Style 2</a></li>
                                                    <li><a href="services-3.html">Services Style 3</a></li>
                                                    <li><a href="services-4.html">Services Style 4</a></li>
                                                    <li><a href="services-5.html">Services Style 5</a></li>
                                                    <li><a href="services-6.html">Services Style 6</a></li>
                                                    <li><a href="services-7.html">Services Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Team Styles</div>
                                                <ul>
                                                    <li><a href="team-1.html">Team Style 1</a></li>
                                                    <li><a href="team-2.html">Team Style 2</a></li>
                                                    <li><a href="team-3.html">Team Style 3</a></li>
                                                    <li><a href="team-4.html">Team Style 4</a></li>
                                                    <li><a href="team-5.html">Team Style 5</a></li>
                                                    <li><a href="team-6.html">Team Style 6</a></li>
                                                    <li><a href="team-7.html">Team Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Shop Styles</div>
                                                <ul>
                                                    <li><a href="shop-1.html">Shop Style 1</a></li>
                                                    <li><a href="shop-2.html">Shop Style 2</a></li>
                                                    <li><a href="shop-3.html">Shop Style 3</a></li>
                                                    <li><a href="shop-4.html">Shop Style 4</a></li>
                                                    <li><a href="shop-5.html">Shop Style 5</a></li>
                                                    <li><a href="shop-6.html">Shop Style 6</a></li>
                                                    <li><a href="shop-7.html">Shop Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Shop Styles</div>
                                                <ul>
                                                    <li><a href="shop-8.html">Shop Style 8</a></li>
                                                    <li><a href="shop-9.html">Shop Style 9</a></li>
                                                    <li><a href="shop-10.html">Shop Style 10</a></li>
                                                    <li><a href="shop-page-1.html">Product Page 1</a></li>
                                                    <li><a href="shop-page-2.html">Product Page 2</a></li>
                                                    <li><a href="shop-page-3.html">Product Page 3</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Info Pages</div>
                                                <ul>
                                                    <li><a href="about-1.html">About Us Style 1</a></li>
                                                    <li><a href="about-2.html">About Us Style 2</a></li>
                                                    <li><a href="about-3.html">About Us Style 3</a></li>
                                                    <li><a href="contact-1.html">Contact Us Style 1</a></li>
                                                    <li><a href="contact-2.html">Contact Us Style 2</a></li>
                                                    <li><a href="gallery-1.html">Gallery Style</a></li>
                                                    <li><a href="faq.html">FAQ</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Other Pages</div>
                                                <ul>
                                                    <li><a href="event-1.html">Event Style 1</a></li>
                                                    <li><a href="event-2.html">Event Style 2</a></li>
                                                    <li><a href="event-3.html">Event Style 3</a></li>
                                                    <li><a href="event-4.html">Event Style 4</a></li>
                                                    <li><a href="event-page-1.html">Event Details Page</a></li>
                                                    <li><a href="signin.html">Sign In or Login</a></li>
                                                    <li><a href="signup.html">Sign Up or Register</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Portfolio <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-dropdown">
                                        <li>
                                            <a>Portfolio Default</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="portfolio-1.html">2 Column</a></li>
                                                <li><a href="portfolio-2.html">3 Column</a></li>
                                                <li><a href="portfolio-3.html">4 Column</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Portfolio Wide</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="portfolio-4.html">Wide Portfolio</a></li>
                                                <li><a href="portfolio-5.html">No Spacing Portfolio</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Portfolio Masonary</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="portfolio-6.html">3 Column Portfolio</a></li>
                                                <li><a href="portfolio-7.html">4 Column Portfolio</a></li>
                                                <li><a href="portfolio-8.html">Wide Portfolio</a></li>
                                                <li><a href="portfolio-9.html">No Spacing Portfolio</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="portfolio-grid.html">Portfolio Grid</a></li>
                                        <li><a href="portfolio-list.html">Portfolio List</a></li>
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Blogs <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-medium">
                                        <li class="row">
                                            <div class="col-lg-3">
                                                <div class="megamenu-ttl">Blog Grid Sytle</div>
                                                <ul>
                                                    <li><a href="blogs-1.html">Blog 2 Column</a></li>
                                                    <li><a href="blogs-2.html">Blog 3 Column</a></li>
                                                    <li><a href="blogs-3.html">Blog 4 Column</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="megamenu-ttl">Blog List Sytle</div>
                                                <ul>
                                                    <li><a href="blogs-9.html">Blog List</a></li>
                                                    <li><a href="blogs-10.html">Blog List Left Sidebar</a></li>
                                                    <li><a href="blogs-11.html">Blog List Right Sidebar</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Blog with Sidebar Sytle</div>
                                                <ul>
                                                    <li><a href="blogs-4.html">Blog 1 Column Right Sidebar</a></li>
                                                    <li><a href="blogs-5.html">Blog 2 Column Right Sidebar</a></li>
                                                    <li><a href="blogs-6.html">Blog 3 Column Right Sidebar</a></li>
                                                    <li><a href="blogs-7.html">Blog 2 Column Left Sidebar</a></li>
                                                    <li><a href="blogs-8.html">Blog 3 Column Left Sidebar</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Blog Page</div>
                                                <ul>
                                                    <li><a href="blog-1.html">Blog Detail 1</a></li>
                                                    <li><a href="blog-2.html">Blog Detail 2</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Components <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-small">
                                        <li class="row">
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="components/accordions.html"><i class="icon-plus mr-2"></i> Accordions</a></li>
                                                    <li><a href="components/alerts.html"><i class="icon-exclamation mr-2"></i> Alerts</a></li>
                                                    <li><a href="components/badges.html"><i class="icon-badge mr-2"></i> Badge</a></li>
                                                    <li><a href="components/buttons.html"><i class="icon-star mr-2"></i> Buttons</a></li>
                                                    <li><a href="components/cards.html"><i class="icon-credit-card mr-2"></i> Cards</a></li>
                                                    <li><a href="components/dropcap.html"><i class="icon-bulb mr-2"></i> Dropcap</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="components/grid.html"><i class="icon-grid mr-2"></i> Grid</a></li>
                                                    <li><a href="components/lists.html"><i class="icon-list mr-2"></i> Lists</a></li>
                                                    <li><a href="components/panels.html"><i class="icon-speedometer mr-2"></i> Panels</a></li>
                                                    <li><a href="components/pricingtable.html"><i class="fa fa-table mr-2"></i> Pricing Table</a></li>
                                                    <li><a href="components/progressbars.html"><i class="icon-chart mr-2"></i> Progressbars</a></li>
                                                    <li><a href="components/sliders.html"><i class="icon-compass mr-2"></i> Sliders</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="components/social-list.html"><i class="icon-list mr-2"></i> Social List</a></li>
                                                    <li><a href="components/tables.html"><i class="fa fa-table mr-2"></i> Tables</a></li>
                                                    <li><a href="components/tabs.html"><i class="icon-cursor mr-2"></i> Tabs</a></li>
                                                    <li><a href="components/typography.html"><i class="icon-tag mr-2"></i> Typography</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect hdr-basket" href="#"><i class="fa fa-cart-plus"></i><span class="cart-count">2</span></a>
                                    <ul class="menu-megamenu menu-cart">
                                        <li class="cart-overview">
                                            <a href="#" class="row">
                                                <div class="col-4 pr-0 cart-img">
                                                    <img src="uploads/shop-11.jpg" alt="">
                                                </div>
                                                <div class="col-8 cart-details">
                                                    <span class="title">Canvas Backpack</span>
                                                    <span class="price">$39</span>
                                                    <span class="qty">Quantity - 3</span>
                                                    <div class="cart-remove"><i class="icon-close"></i></div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="cart-overview">
                                            <a href="#" class="row">
                                                <div class="col-4 pr-0 cart-img">
                                                    <img src="uploads/shop-31.jpg" alt="">
                                                </div>
                                                <div class="col-8 cart-details">
                                                    <span class="title">Leather Wallet</span>
                                                    <span class="price">$49</span>
                                                    <span class="qty">Quantity - 3</span>
                                                    <div class="cart-remove"><i class="icon-close"></i></div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="row align-items-center">
                                            <div class="col-6">
                                                <a href="#" class="btn btn-dark text-white text-center">Checkout</a>
                                            </div>
                                            <div class="col-6 text-right">
                                                <p class="font-dosis font-20 m-0">Total : $98</p>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect hdr-search" href="#"><i class="fa fa-search"></i></a>
                                </li>
                                <li class="mobile-menu-close"><i class="fa fa-times"></i></li>
                            </ul><!-- End Menu Section -->
                            <div id="menu-bar"><a><i class="fa fa-bars"></i></a></div>
                        </div>
                    </div>
                </div>
                <div class="search-bar animated zoomIn">
                    <div class="search-content">
                        <div class="search-input">
                            <input type="text" placeholder="Enter your text ....">
                            <button class="search-btn"><i class="icon-magnifier"></i></button>
                        </div>
                    </div>
                    <div class="search-close"><i class="icon-close"></i></div>
                </div>
            </div>
        </header><!-- End Header Section -->
        <!-- Start Page Title Section -->
        <div class="page-ttl page-dark">
            <div class="layer-stretch">
                <div class="page-ttl-container">
                    <h1>Product <span class="text-primary">Page 1</span></h1>
                    <p><a href="#">Home</a> &#8594; <a href="#">Shop</a> &#8594; <span>Product Page</span></p>
                </div>
            </div>
        </div><!-- End Page Title Section -->
        <!-- Start Page Section -->
        <div class="shop">
            <div class="layer-stretch">
                <div class="layer-wrapper pb-20">
                    <div class="row pt-4">
                        <div class="col-md-5">
                            <div class="flexslider thumbnail-slider">
                                <ul class="slides">
                                    <li data-thumb="uploads/shop-11.jpg">
                                        <img src="uploads/shop-11.jpg" alt="" />
                                    </li>
                                    <li data-thumb="uploads/shop-12.jpg">
                                        <img src="uploads/shop-12.jpg" alt="" />
                                    </li>
                                    <li data-thumb="uploads/shop-13.jpg">
                                        <img src="uploads/shop-13.jpg" alt="" />
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="shopp-details">
                                <h2>Canon Camera</h2>
                                <div class="price"><del>$279.00</del> $179.99</div>
                                <p class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
                                <ul class="list">
                                    <li><strong>SKU: </strong>9540</li>
                                    <li><strong>COLORS: </strong>Black</li>
                                    <li><strong>SIZES: </strong>XS,S,M,L,XL</li>
                                    <li><strong>CONDITION: </strong>New</li>
                                </ul>
                                <div class="row m-0">
                                    <div class="col-md-4">
                                        <div class="meta">
                                            <span>Size</span>
                                            <span>
                                                <select class="form-control">
                                                    <option>S</option>
                                                    <option>M</option>
                                                    <option>L</option>
                                                    <option>XL</option>
                                                </select>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="meta">
                                            <span>Quantity</span>
                                            <span>
                                                <input type="number" class="form-control" placeholder="Quantity">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="cart-button">
                                    <a href="#" class="btn btn-dark"><i class="icon-basket mr-2"></i> Add to Cart</a>
                                    <a href="#" class="btn btn-outline btn-primary btn-outline-2x"><i class="fa fa-shopping-cart mr-2"></i>Buy Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pt-4">
                        <div class="col-12">
                            <ul class="nav nav-tabs nav-tabs-line nav-tabs-line-primary">
                                <li class="nav-item">
                                    <a class="nav-link active font-18" href="#moreinfo" data-toggle="tab">More Info</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link font-18" href="#specification" data-toggle="tab">Specification</a>
                                </li>
                                <li class="nav-item">  
                                    <a class="nav-link font-18" href="#faq" data-toggle="tab">Faq</a>
                                </li>
                                <li class="nav-item">  
                                    <a class="nav-link font-18" href="#review" data-toggle="tab">Review (3)</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="moreinfo">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="m-0">Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam. In quis scelerisque velit. Proin pellentesque neque ut scelerisque dapibus. Praesent elementum feugiat dignissim. Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam. In quis scelerisque velit. Proin pellentesque neque ut scelerisque dapibus. Praesent elementum feugiat dignissim. Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam.</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="m-0">Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam. In quis scelerisque velit. Proin pellentesque neque ut scelerisque dapibus. Praesent elementum feugiat dignissim. Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam. In quis scelerisque velit. Proin pellentesque neque ut scelerisque dapibus. Praesent elementum feugiat dignissim. Nunc placerat mi id nisi interdum mollis. Praesent pharetra, justo ut scelerisque mattis, leo quam aliquet diam, congue laoreet elit metus eget diam. Proin ac metus diam.</p>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="specification">
                                    <div class="">
                                        <table class="table table-bordered table-striped">
                                            <tbody>
                                                <tr>
                                                    <td>Size</td>
                                                    <td>Small, Medium, Large &#38; Extra Large</td>
                                                </tr>
                                                <tr>
                                                    <td>Color</td>
                                                    <td>Red, Blue, Green &#38; Black</td>
                                                </tr>
                                                <tr>
                                                    <td>Lens</td>
                                                    <td>55mm, 105mm</td>
                                                </tr>
                                                <tr>
                                                    <td>Length</td>
                                                    <td>12cm</td>
                                                </tr>
                                                <tr>
                                                    <td>Material</td>
                                                    <td>Fibre</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="faq">
                                    <div class="theme-accordion-container">
                                        <div class="theme-accordion">
                                            <div class="theme-accordion-hdr">
                                                <h4 class="text-primary"><span class="icon-question"></span> Question 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
                                                <div class="theme-accordion-control"><i class="fa fa-plus fa-minus"></i></div>
                                            </div>
                                            <div class="theme-accordion-bdy" style="display: block;">
                                                <div class="row p-3">
                                                    <div class="col-12">
                                                        <p class="paragraph-medium paragraph-black">
                                                            <span class="dropcap bg-primary text-white">L</span>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt voluptatum amet molestiae, sint consequatur, quam. Vero enim fugit provident labore qui, autem, cum numquam ipsa repudiandae asperiores saepe mollitia, voluptatibus! Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.
                                                        </p>
                                                        <div class="pull-right">
                                                            <a href="#" class="link-icon"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="theme-accordion">
                                            <div class="theme-accordion-hdr">
                                                <h4 class="text-primary"><span class="icon-question"></span> Question 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
                                                <div class="theme-accordion-control"><i class="fa fa-plus"></i></div>
                                            </div>
                                            <div class="theme-accordion-bdy">
                                                <div class="row p-3">
                                                    <div class="col-12">
                                                        <p class="paragraph-medium paragraph-black">
                                                            <span class="dropcap bg-primary text-white">L</span>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt voluptatum amet molestiae, sint consequatur, quam. Vero enim fugit provident labore qui, autem, cum numquam ipsa repudiandae asperiores saepe mollitia, voluptatibus! Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.
                                                        </p>
                                                        <div class="pull-right">
                                                            <a href="#" class="link-icon"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="review">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="comment-list">
                                                <li>
                                                    <div class="row">
                                                        <div class="col-2 hidden-xs-down pr-0 comment-img">
                                                            <img src="uploads/comment-1.jpg" alt="">
                                                        </div>
                                                        <div class="col-10 comment-detail text-left">
                                                            <div class="comment-meta">
                                                                <span>Jorah Mormant</span>
                                                                <span>27 June 2017</span>
                                                            </div>
                                                            <div class="comment-post">
                                                                Laboris nisi ut aliquip ex ea Duis aute irure dolor in reprehenderit in voluptate velit .Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit .
                                                            </div>
                                                            <ul class="comment-action">
                                                                <li><a><i class="fa fa-thumbs-up"></i>Like</a></li>
                                                                <li><a><i class="fa fa-thumbs-down"></i>Dislike</a></li>
                                                                <li><a><i class="fa fa-reply"></i>Reply</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="row">
                                                        <div class="col-2 hidden-xs-down pr-0 comment-img">
                                                            <img src="uploads/comment-2.jpg" alt="">
                                                        </div>
                                                        <div class="col-10 comment-detail text-left">
                                                            <div class="comment-meta">
                                                                <span>Micheal Doe</span>
                                                                <span>27 June 2017</span>
                                                            </div>
                                                            <div class="comment-post">
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ad odio, doloribus dicta. Nesciunt odit, sed optio repudiandae.
                                                            </div>
                                                            <ul class="comment-action">
                                                                <li><a><i class="fa fa-thumbs-up"></i>Like</a></li>
                                                                <li><a><i class="fa fa-thumbs-down"></i>Dislike</a></li>
                                                                <li><a><i class="fa fa-reply"></i>Reply</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="row">
                                                        <div class="col-2 hidden-xs-down pr-0 comment-img">
                                                            <img src="uploads/comment-3.jpg" alt="">
                                                        </div>
                                                        <div class="col-10 comment-detail text-left">
                                                            <div class="comment-meta">
                                                                <span>Gerry George</span>
                                                                <span>27 June 2017</span>
                                                            </div>
                                                            <div class="comment-post">
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ad odio, doloribus dicta. Nesciunt odit, sed optio repudiandae.
                                                            </div>
                                                            <ul class="comment-action">
                                                                <li><a><i class="fa fa-thumbs-up"></i>Like</a></li>
                                                                <li><a><i class="fa fa-thumbs-down"></i>Dislike</a></li>
                                                                <li><a><i class="fa fa-reply"></i>Reply</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="font-20">Write a Review</p>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                                        <input class="mdl-textfield__input" type="text" id="name">
                                                        <label class="mdl-textfield__label" for="name">Your Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                                        <input class="mdl-textfield__input" type="text" id="email">
                                                        <label class="mdl-textfield__label" for="email">Your Email Address</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                                        <input class="mdl-textfield__input" type="text" id="phone">
                                                        <label class="mdl-textfield__label" for="phone">Your Phone Number</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                                        <input class="mdl-textfield__input" type="text" id="subject">
                                                        <label class="mdl-textfield__label" for="subject">Your Subject</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                                        <textarea class="mdl-textfield__input" rows="3" id="message" ></textarea>
                                                        <label class="mdl-textfield__label" for="message">Your Message</label>
                                                    </div>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent button button-primary contact-submit">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default mt-5">
                        <div class="panel-head">
                            <div class="panel-title">Releated Product</div>
                        </div>
                        <div class="panel-wrapper">
                            <div class="panel-body related-product">
                                <div class="owl-carousel owl-theme multi-item-slider">
                                    <div class="theme-owlslider-container">
                                        <img class="img-responsive" src="uploads/shop-11.jpg" alt="">
                                        <h6 class="title"><a href="#">Canon Camera</a></h6>
                                        <div class="price">$499</div>
                                    </div>
                                    <div class="theme-owlslider-container">
                                        <img class="img-responsive" src="uploads/shop-21.jpg" alt="">
                                        <h6 class="title"><a href="#">Multiple Product</a></h6>
                                        <div class="price">$499</div>
                                    </div>
                                    <div class="theme-owlslider-container">
                                        <img class="img-responsive" src="uploads/shop-31.jpg" alt="">
                                        <h6 class="title"><a href="#">Leather Wallet and Watch</a></h6>
                                        <div class="price">$499</div>
                                    </div>
                                    <div class="theme-owlslider-container">
                                        <img class="img-responsive" src="uploads/shop-41.jpg" alt="">
                                        <h6 class="title"><a href="#">Leather Wallet and Watch</a></h6>
                                        <div class="price">$499</div>
                                    </div>
                                    <div class="theme-owlslider-container">
                                        <img class="img-responsive" src="uploads/shop-51.jpg" alt="">
                                        <h6 class="title"><a href="#">Leather Wallet and Watch</a></h6>
                                        <div class="price">$499</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End Page Section -->
        <!-- Start Action Section -->
        <div class="action">
            <div class="layer-stretch">
                <div class="layer-wrapper text-center">
                    <div class="layer-ttl"><h4>We design <span class="text-primary">delightful</span> digital experiences</h4></div>
                    <div class="action-content">Read more about what we do and our philosophy of design. Judge for yourself The work and results we’ve achieved for other clients, and meet our highly experienced Team who just love to design, develop and deploy. Tell Us Your Story</div>
                    <a href="#" class="btn btn-outline btn-primary btn-pill btn-outline-2x btn-lg mt-3">Tell Us Your Story</a>
                </div>
            </div>
        </div><!-- End Action Section -->
        <!-- Start Footer Section -->
        <footer id="footer">
            <div class="layer-stretch">
                <!-- Start main Footer Section -->
                <div class="row layer-wrapper">
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Basic Info</p></div>
                        <div class="footer-container footer-a">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-map-marker"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">
                                            Your office, Building Name<br />
                                            Street name, Area<br />
                                            City, Country Pin Code
                                        </p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-phone"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">11122333333</p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-envelope"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">hello@yourdomain.com</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Quick Links</p></div>
                        <div class="footer-container footer-b">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <ul class="tbl-cell">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about-1.html">About</a></li>
                                        <li><a href="event-1.html">Event</a></li>
                                        <li><a href="contact-1.html">Contact</a></li>
                                        <li><a href="portfolio-1.html">Portfolio</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                    <ul class="tbl-cell">
                                        <li><a href="signin.html">Sign In</a></li>
                                        <li><a href="signup.html">Sign Up</a></li>
                                        <li><a href="services-1.html">Services</a></li>
                                        <li><a href="Blogs-1.html">Blogs</a></li>
                                        <li><a href="Blog-1.html">Blog</a></li>
                                        <li><a href="team-1.html">Team</a></li>
                                        <li><a href="faq.html">Faq</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Newsletter</p></div>
                        <div class="footer-container footer-c">
                            <div class="footer-subscribe">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                    <input class="mdl-textfield__input" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="subscribe-email">
                                    <label class="mdl-textfield__label" for="subscribe-email">Your Email</label>
                                    <span class="mdl-textfield__error">Please Enter Valid Email!</span>
                                </div>
                                <div class="footer-subscribe-button">
                                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect button button-primary">Submit</button>
                                </div>
                            </div>
                            <ul class="social-list social-list-colored footer-social">
                                <li>
                                    <a href="#" target="_blank" id="footer-facebook" class="fab fa-facebook"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-facebook">Facebook</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-twitter" class="fab fa-twitter"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-twitter">Twitter</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-google" class="fab fa-google"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-google">Google</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-instagram" class="fab fa-instagram"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-instagram">Instagram</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-youtube" class="fab fa-youtube"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-youtube">Youtube</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-linkedin" class="fab fa-linkedin"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-linkedin">Linkedin</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-flickr" class="fab fa-flickr"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-flickr">Flickr</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-rss" class="fab fa-rss"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-rss">Rss</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- End main Footer Section -->
            <!-- Start Copyright Section -->
            <div id="copyright">
                <div class="layer-stretch">
                    <div class="paragraph-medium paragraph-white">2017 © Pepdev ALL RIGHTS RESERVED.</div>
                </div>
            </div><!-- End of Copyright Section -->
        </footer><!-- End of Footer Section -->
    </div>
    <!-- **********Included Scripts*********** -->

    <!-- Jquery Library 2.1 JavaScript-->
    <script src="assets/plugin/jquery/jquery-2.1.4.min.js"></script>
    <!-- Popper JavaScript-->
    <script src="assets/plugin/popper/popper.min.js"></script>
    <!-- Bootstrap Core JavaScript-->
    <script src="assets/plugin/bootstrap/bootstrap.min.js"></script>
    <!-- Modernizr Core JavaScript-->
    <script src="assets/plugin/modernizr/modernizr.js"></script>
    <!-- Animaateheading JavaScript-->
    <script src="assets/plugin/animateheading/animateheading.js"></script>
    <!-- Material Design Lite JavaScript-->
    <script src="assets/plugin/material/material.min.js"></script>
    <!-- Material Select Field Script -->
    <script src="assets/plugin/material/mdl-selectfield.min.js"></script>
    <!-- Flexslider Plugin JavaScript-->
    <script src="assets/plugin/flexslider/jquery.flexslider.min.js"></script>
    <!-- Owl Carousel Plugin JavaScript-->
    <script src="assets/plugin/owl_carousel/owl.carousel.min.js"></script>
    <!-- Scrolltofixed Plugin JavaScript-->
    <script src="assets/plugin/scrolltofixed/jquery-scrolltofixed.min.js"></script>
    <!-- Magnific Popup Plugin JavaScript-->
    <script src="assets/plugin/magnific_popup/jquery.magnific-popup.min.js"></script>
    <!-- WayPoint Plugin JavaScript-->
    <script src="assets/plugin/waypoints/jquery.waypoints.min.js"></script>
    <!-- CounterUp Plugin JavaScript-->
    <script src="assets/plugin/counterup/jquery.counterup.js"></script>
    <!-- masonry Plugin JavaScript-->
    <script src="assets/plugin/masonry_pkgd/masonry.pkgd.min.js"></script>
    <!-- SmoothScroll Plugin JavaScript-->
    <script src="assets/plugin/smoothscroll/smoothscroll.min.js"></script>
    <!--Custom JavaScript-->
    <script src="dist/js/custom.js"></script>

</body>
</html>